<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>编辑导航 - {{.SITE_NAME}}</title>
    
    <!-- 引入必要的CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/main.css" rel="stylesheet">
    <link href="/static/css/toast.css" rel="stylesheet">
    
    <!-- 引入必要的JS -->
    <script src="/static/jquery/1.12.4/jquery.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/layer/layer.js"></script>
    <script src="/static/js/jquery.form.js"></script>
    <script src="/static/js/main.js"></script>
</head>
<body class="manual-container">
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <form method="post" id="navForm" action="{{urlfor "ManagerController.NavEdit"}}">
                    <input type="hidden" name="id" value="{{.Nav.Id}}">
                    <div class="form-group">
                        <label><span class="error-message"> * </span>导航名称</label>
                        <input type="text" class="form-control" name="name" value="{{.Nav.Name}}" placeholder="导航名称" required>
                    </div>
                    <div class="form-group">
                        <label><span class="error-message"> * </span>链接地址</label>
                        <input type="text" class="form-control" name="url" value="{{.Nav.Url}}" placeholder="链接地址，如: /explore ，或者：https://www.baidu.com" required>
                    </div>
                    <div class="form-group">
                        <label>图标</label>
                        <input type="text" class="form-control" name="icon" value="{{.Nav.Icon}}" placeholder="支持图片图标、外部图片和Font Awesome图标">
                        <p class="help-block">图片图标(以 "/" 开头)如: /static/images/logo.png<br>外部图片(以 "http" 或 "https" 开头)如: https://www.baidu.com/favicon.ico<br>图标名称参考: <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome Icons</a>&nbsp;如: fa fa-home</p>
                    </div>
                    <div class="form-group">
                        <label>打开方式</label>
                        <select class="form-control" name="target">
                            <option value="_self" {{if eq .Nav.Target "_self"}}selected{{end}}>当前窗口</option>
                            <option value="_blank" {{if eq .Nav.Target "_blank"}}selected{{end}}>新窗口</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>排序</label>
                        <input type="number" class="form-control" name="sort" value="{{.Nav.Sort}}" placeholder="0">
                        <p class="help-block">数字越小越靠前</p>
                    </div>
                    <div class="form-group">
                        <label>状态</label>
                        <select class="form-control" name="status">
                            <option value="0" {{if eq .Nav.Status 0}}selected{{end}}>启用</option>
                            <option value="1" {{if eq .Nav.Status 1}}selected{{end}}>禁用</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>文字颜色</label>
                        <input type="text" class="form-control" name="color" value="{{.Nav.Color}}" placeholder="#666666">
                        <p class="help-block">支持CSS颜色值，如: #666666、red、rgb(0,0,0)等</p>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success" data-loading-text="保存中...">保存</button>
                        <span id="error-message" class="error-message"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
    $(function(){
        $("#navForm").ajaxForm({
            beforeSubmit: function(){
                var name = $.trim($("input[name=name]").val());
                var url = $.trim($("input[name=url]").val());
                
                if(name == "") {
                    layer.msg("导航名称不能为空");
                    return false;
                }
                if(url == "") {
                    layer.msg("链接地址不能为空");
                    return false;
                }
                $("#navForm button[type=submit]").button('loading');
            },
            success: function(res){
                if(res.errcode === 0) {
                    parent.layer.msg("保存成功");
                    setTimeout(function(){
                        parent.window.location.reload();
                    }, 1000);
                } else {
                    $("#error-message").html(res.message);
                    $("#navForm button[type=submit]").button('reset');
                }
            },
            error: function() {
                $("#error-message").html("服务器错误，请稍后再试");
                $("#navForm button[type=submit]").button('reset');
            }
        });
    });
    </script>
</body>
</html> 